<template>
  <div class="inputsearch">
     <!-- 顶部导航 -->
     <van-nav-bar
        title="搜索"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="$router.go(-1)"
      />

      <!-- 搜索框 -->
    <Search @sou="search"></Search>
    <!-- <Search></Search> -->

   <div v-if="num">
     <!-- 历史搜索 -->
     <HistoricalSearch :searchArr="searchArr" @sdian="spanTiao" @clearLocassion="remove"></HistoricalSearch>

    <!-- 搜索发现 -->
    <FindSearch></FindSearch>
   </div>

   <div v-else class="bottom">

        <!-- 排列 -->
    <Sort :dainIndex="dainIndex" @deliverIndex="changelist" ></Sort>

    <!-- 商品列表 -->
    <List :list="list" ></List>

    <div class="empty" v-show="list.length == 0">不好意思，没有该商品！</div>
    </div>

  </div>

</template>

<script>
import FindSearch from '@/components/InputSearch/FindSearch.vue';
import HistoricalSearch from '@/components/InputSearch/HistoricalSearch.vue';
import Search from '@/components/InputSearch/Search.vue';

import Sort from '@/components/Home/Sort.vue';
import List from '@/components/Home/List.vue';

import {search} from '../utils/api'

export default {
  data (){//负责定义响应式数据
        return{
        num:1,
        searchArr: [
            // '三文鱼', '慈善', '与'
        ],
        // 用来保存当前点击的分类下标
         dainIndex:0,
         list:[],
        }
    },
    mounted(){
        // 在页面初次渲染的时候去看本地存储中是否有值
            if(localStorage.getItem('searchArr') != null){
                this.searchArr = JSON.parse(localStorage.getItem('searchArr'));
            }else{
              this.searchArr = [];
            }

    },
    components:{
     FindSearch,
     HistoricalSearch,
     Search,
     Sort,
     List
    },
    methods: {
        search(searchText){
            if (searchText && searchText != " ") {
                // 将输入框中输入的内容 保存到searchArr中
                this.searchArr.push(searchText);
                // 将数组存入本地存储中
                localStorage.setItem('searchArr',JSON.stringify(this.searchArr));
                // 点击之后发请求拿到响应数据
                 // 发请求拿到搜索数据
                search({searchkey:searchText}).then((res)=>{
                    this.list = res.data.list;
                    })
                    this.num = 0;
            }
        },
        // 给每个span设置点击事件点击时可以发送请求拿到想要的数据
        spanTiao(item){
                // 点击之后发请求拿到响应数据
                 // 发请求拿到搜索数据
             search({searchkey:item}).then((res)=>{
                    this.list = res.data.list;
            })
            this.num = 0;
        },
        // 删除本地存储记录
        remove(){
          this.searchArr  =localStorage.removeItem('searchArr');
        },
        // 排序
        changelist(index){
            this.dainIndex = index;  
          // 当点击综合排序按评分排
            if (index == 0) {
              // 当点击综合排序按照评分排序
              this.list.sort((a, b) => {
                return a.wmPoiScore - b.wmPoiScore;
              });
              // 当点击距离最近按距离排序
            } else if (index == 1) {
              this.list.sort((a, b) => {
                return (
                  parseInt(b.minPriceTip.slice(4))-parseInt(a.minPriceTip.slice(4))
                );
              });
              // 当点击销量最高按销量排序
            } else if (index == 2) {
              this.list.sort((a, b) => {
                return (
                  parseInt(b.monthSalesTip.slice(2))-parseInt(a.monthSalesTip.slice(2))
                );
              });
              // 点击筛选按时间排序
            } else if (index == 3) {
              this.list.sort((a, b) => {
                // deliveryTimeTip
                return (
                    // console.log(b.deliveryTimeTip.slice(0,2)),
                  parseInt(b.deliveryTimeTip.slice(0,2))-parseInt(a.deliveryTimeTip.slice(0,2))
                );
              });
            }
          },
    }
}
</script>

<style lang="scss" scoped>

.inputsearch{
  padding: 6px 10px 0;
}
input{
  text-align: center;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: none;
    outline: none;
    color: #999;
    font-size: 14px;
}

.searchbox {
            display: flex;
            align-items: center;
            color: lightskyblue;
            margin-top: 5px;
        }

        .searchbox input {
            height: 40px;
            border: 0px;
            outline: none;
            background-color: #f5f5f5;
            padding-left: 20px;
            color: #999;
            font-size: 14px;
            flex: 1;
            border-radius: 20px;
        }

        .searchbox span {
            width: 40px;
            text-align: center;
        }

        .block {
            margin: 10px;
        }

        .block .title {
            font-weight: bold;
            padding: 10px 0;
        }

        .block .list span {
            display: inline-block;
            background-color: #f5f5f5;
            padding: 8px 14px;
            border-radius: 5px;
            margin-right: 10px;
            margin-bottom: 6px;
        }

        .bottom{
            padding-top: 15px;
        }
        .empty{
            text-align: center;
            padding: 50px 0;
        }
</style>